<template>
  <base-dialog
    :title="!form.id ? '新增' : '修改'"
    ref="baseDialog"
    top="5vh"
    width="80%"
    :BtnShow="false"
  >
    <el-form ref="form" :model="form" label-width="80px" :rules="rules" size="mini">
      <el-row>
        <el-col :span="24">
          <el-form-item label="标题" prop="title">
            <el-input
              v-model="form.title"
              placeholder="请输入标题"
              show-word-limit
              clearable
              :maxlength="50"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <el-form-item label="内容" prop="content">
            <BaseEditor ref="BaseEditor" @changeHTML="changeHTML" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="5">
          <el-form-item label="封面" prop="cover">
            <img
              class="cover"
              @click="handleCover"
              src="@/assets/system/img_alt.png"
              alt=""
              v-if="!form.cover"
            />
            <img class="cover" @click="handleCover" :src="form.cover" alt="" v-else />
          </el-form-item>
        </el-col>
        <el-col :span="19">
          <el-form-item label="摘要" prop="digest">
            <el-input
              type="textarea"
              v-model="form.digest"
              placeholder="请输入摘要"
              show-word-limit
              clearable
              :autosize="{ minRows: 2, maxRows: 12 }"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <PicDealDialog ref="PicDealDialog" @uploadImgSuccess="uploadImgSuccess" />
    <footer class="dialog_footer">
      <el-button size="mini" @click="handleClose">取 消</el-button>
      <el-button size="mini" type="primary" @click="handleSubmit('N')">保存为草稿</el-button>
      <el-button size="mini" type="success" @click="handleSubmit('Y')">保存并发布</el-button>
    </footer>
  </base-dialog>
</template>

<script>
import BaseEditor from "@/components/BaseEditor"
import PicDealDialog from "./PicDealDialog.vue"
import { add, edit, getById } from "@/api/system/notice"
import { mapGetters } from "vuex"
export default {
  components: { BaseEditor, PicDealDialog },
  data() {
    return {
      title: "",
      form: {
        cover: ""
      },
      rules: {
        title: [{ required: true, message: "请输入标题", trigger: "blur" }],
        cover: [{ required: true, message: "请上传封面", trigger: "blur" }],
        content: [{ required: true, message: "请输入内容", trigger: "blur" }]
      }
    }
  },
  computed: {
    ...mapGetters(["token", "userInfo"])
  },
  methods: {
    init(row) {
      if (row) {
        this.title = "编辑"
        getById(row.id).then(({ data }) => {
          this.form = data
          this.$nextTick(() => {
            this.$refs.BaseEditor.html = this.form.content
          })
        })
      } else {
        this.title = "新增"
      }
      this.$refs.baseDialog.dialogVisible = true
    },
    handleClose() {
      this.form = {
        cover: ""
      }
      this.$refs.baseDialog.dialogVisible = false
    },
    changeHTML(val) {
      this.form.content = val
    },
    handleCover() {
      this.$refs.PicDealDialog.init()
    },
    uploadImgSuccess(data) {
      this.form.cover = data
    },
    // 表单提交
    handleSubmit(published) {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          const { title, content, cover, digest } = this.form
          const author = this.userInfo.nickname
          const data = { title, content, cover, digest, author, published }
          if (this.title === "编辑") {
            data.id = this.form.id
            await edit(data)
            this.$message({
              type: "success",
              message: published === "Y" ? "发布成功" : "保存成功"
            })
            //更新已读数据
            this.$store.dispatch("notice/getNoticeNumAction")
            this.$emit("updatePage")
            this.handleClose()
          } else {
            await add(data)
            this.$message({
              type: "success",
              message: published === "Y" ? "发布成功" : "保存成功"
            })

            this.$store.dispatch("notice/getNoticeNumAction")
            this.$emit("updatePage")
            this.handleClose()
          }
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.cover {
  width: 235px;
  height: 100px;
}
.dialog_footer {
  text-align: right;
}
</style>
